<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>${title}</title>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
	
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/index.css" type="text/css"></link>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery.ztree.core-3.2.js"></script>
	<script type="text/javascript" src="<c:url value='/resource/js/jquery.form.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/resource/js/common.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/resource/js/map.js'/>"></script>
	<style type="text/css">
		div.content{
			width: 800px;
			display: block;
			padding-top:15px;
		}
		#top{width:800px;font-weight: bold;}
		#role_title{width:200px;float:left;margin-left:15px;text-align:center;font-weight:bold;color:#535353;}
		#user_role_title{width:150px;float:left;margin-left:10px;text-align:center;font-weight:bold;color:#535353;}
		#user_dept_title{width:150px;float:left;margin-left:40px;text-align:center;font-weight:bold;color:#535353;}
		#dept_title{width:200px;float:left;margin-left:10px;text-align:center;font-weight:bold;color:#535353;}
		
		#opera{width:35px;height:180px;margin:0px;padding:0px;float:left;margin:78px 0px 0px 0px;text-align:center;}
		#opera p{width:35px;height:30px;line-height:30px; cursor:pointer;}
		#opera p:hover{width:35px;height:30px;cursor:pointer;background-color:#ccc;}
		
		button{
			width:30px;
		}
		div.tree1{
			margin-left:15px;
			width:200px;
			float:left;
			overflow-y: auto;
			overflow-x: hidden;
			border: 1px solid;
			height:352px;
		}
		div.tree2{
			width:200px;
			overflow-y: auto;
			margin-left: 10px;
			overflow-x: hidden;
			float:right;
			border: 1px solid;
			height:352px;
		}
		.userLeft{
			width:150px;
			overflow: auto;
			float:left;
			height:360px;
			border: 1px solid;
			margin-left: 10px;
		}
		.userRight{
			width:150px;
			overflow: auto;
			height:360px;
			border: 1px solid;
			float:left;
		}
	</style>
	<script type="text/javascript">
	var deptIds = eval("${deptIds}");
	$(function(){
		$.fn.zTree.init($("#tree1"), setting1);
		$.fn.zTree.init($("#tree2"), setting2);
	});

	var userMap = new Map();
	
	//保存左侧select的初始值
	var user1 =new Array();
	//保存右侧select的初始值
	var user2 =new Array();
	var addRight = new Array();
	var addLeft = new Array();
		var setting1={
			async:{
				enable: true,
				url:"<%=request.getContextPath()%>/dept/getbackdept.json",
				dataType:"json", 
				//autoParam:["id", "name"],
				type:'get',
				autoParam: ["deptId"],
				
				dataFilter: function(treeId, parentNode, childNodes){
					return childNodes.data;
				}
			},
			callback: {
				onClick: zTree1OnClick,
				onAsyncSuccess:onAsyncSuccess
			},
			data:{
				key:{
					name:"alias"
				},
				simpleData:{
					enable: true,
					idKey: "deptId",
					pIdKey: "parentId",
					rootPId: 0
				}
			}
		};
		var setting2 = {
				async:{
					enable: true,
					url:"<%=request.getContextPath()%>/dept/getAllDept.json",
					dataType:"json", 
					//autoParam:["id", "name"],
					type:'get',
					autoParam: ["deptId"],
					
					dataFilter: function(treeId, parentNode, childNodes){
						return childNodes.data;
					}
				},
				callback: {
					onClick: zTree2OnClick
				},
				data:{
					key:{
						name:"alias"
					},
					simpleData:{
						enable: true,
						idKey: "deptId",
						pIdKey: "parentId",
						rootPId: 0
					}
				}
				
			};

	function onAsyncSuccess(){
		var zTree = $.fn.zTree.getZTreeObj("tree1");
		$.each(deptIds,function(i,deptId){
			var node = zTree.getNodeByParam("deptId",deptId,null);
			expandNode(node);
		})
		if(deptIds.length>0){
			var selectDept = deptIds[deptIds.length-1];
			var focusNode = zTree.getNodeByParam("deptId",deptIds[deptIds.length-1],null);
			if(focusNode){
				zTree.selectNode(focusNode);
				var action =  "<%= request.getContextPath()%>" + "/dept/getUsers.json";
				$.ajax({
					url:action,
					dataType:"JSON",
					type:"post",
					data:"deptId="+focusNode.deptId,
					success:function(data){
						$("#selectRight option").remove();
						$.each(optionRight,function(i,n){
							$("#selectRight").append(n);
						});
						optionLeft = new Array();
						$("#deptId1").val(focusNode.deptId);
						$("#deleteDept").val(focusNode.deptId);
						$("#isParent").val(focusNode.isParent);
						$("#selectLeft").find("option").remove();
						user1 = new Array();
						$.each(data.users,function(i,user){
							$("#selectLeft").append("<option style='color:green' value='"+user.policeNum+"'>"+user.name+"</option>");
							user1[i]=user.policeNum;
							optionLeft[optionLeft.length]="<option style='color:green' value='"+user.policeNum+"'>"+user.name+"</option>";
						});
					}
				});
			}
		}
	}
	
	function expandNode(node){
		if(!node){
			return false;
		}
		var zTree = $.fn.zTree.getZTreeObj("tree1");
		zTree.expandNode(node,true,false,false);
		expandOk = true;
	}
	
		function zTree1OnClick(event, treeId, treeNode){
			//先判断部门编号必须不一样
			var dept2= $("#deptId2").val();
			if(dept2!=""){
				if(treeNode.deptId==dept2){
					parent.art.dialog.tips("必须选择不同的部门",3);
					return ;
				}	
			}

			var action =  "<%= request.getContextPath()%>" + "/dept/getUsers.json";
			$.ajax({
				url:action,
				dataType:"JSON",
				data:"deptId="+("3205"==treeNode.deptId?"320500":treeNode.deptId),
				success:function(data){
					$("#selectRight option").remove();
					$.each(optionRight,function(i,n){
						$("#selectRight").append(n);
					});
					optionLeft = new Array();
					$("#deptId1").val(treeNode.deptId);
					$("#deptId1name").val(treeNode.name);
					$("#deleteDept").val(treeNode.deptId);
					$("#isParent").val(treeNode.isParent);
					$("#selectLeft").find("option").remove();
					user1 = new Array();
					userMap = new Map();
					$.each(data.users,function(i,user){
						$("#selectLeft").append("<option style='color:green' value='"+user.policeNum+"'>"+user.name+"</option>");
						user1[i]=user.policeNum;
						optionLeft[optionLeft.length]="<option style='color:green' value='"+user.policeNum+"'>"+user.name+"</option>";
					});
				}
			});
		}
		function zTree2OnClick(event, treeId, treeNode){
			//先判断部门编号必须不一样
			var dept1= $("#deptId1").val();
			if(dept1!=""){
				if(treeNode.deptId==dept1){
					parent.art.dialog.tips("必须选择不同的部门",3);
					return ;
				}	
			}
			var action =  "<%= request.getContextPath()%>" + "/dept/getUsers.json";
			$.ajax({
				url:action,
				dataType:"JSON",
				data:"deptId="+("3205"==treeNode.deptId?"320500":treeNode.deptId),
				success:function(data){
					$("#selectLeft option").remove();
					$.each(optionLeft,function(i,n){
						$("#selectLeft").append(n);
					});
					optionRight = new Array();
					$("#deptId2").val(treeNode.deptId);
					$("#selectRight").find("option").remove();
					$("#deleteDept").val(treeNode.deptId);
					$("#deptId2name").val(treeNode.name);
					$("#isParent").val(treeNode.isParent);
					//user2 = new Array();
					$.each(data.users,function(i,user){
						$("#selectRight").append("<option style='color:blue' value='"+user.policeNum+"'>"+user.name+"</option>");
						user2[i]=user.policeNum;
						optionRight[optionRight.length]="<option style='color:blue' value='"+user.policeNum+"'>"+user.name+"</option>";
					});
				}
			})
		}
		//保存左边初始化user
		var optionLeft = new Array();
		//保存右边初始化user
		var optionRight = new Array();
		$(document).ready(function(){
			$("#moveRight").bind("click",removeRight).bind("click",changeColor).hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");});
			$("#moveLeft").bind("click",removeLeft).bind("click",changeColor).hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");});
			$("#moveLefts").bind("click",removeLefts).bind("click",changeColor).hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");});
			$("#moveRights").bind("click",removeRights).bind("click",changeColor).hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");});
		});
		/**
		  *选中的右移
		  */
		function removeRight(){
			if($("#deptId2").val()==""){
				parent.art.dialog.tips("请先在右边选择部门!",3);
				return ;
			}
			$("#selectLeft option:selected").each(function(){
				var value = $(this).val();
				var text = $(this).text();
				if($.inArray(value,user2)<0){
					if($.inArray(value,addRight)<0){
						addRight[addRight.length]=value;
					}
					userMap.put(value,text);
				}
				$("#selectLeft option[value="+value+"]").remove();
				$("#selectRight").append("<option value='"+value+"'>"+text+"</option>");
			});
		}	
		/**选择的左移*/
		function removeLeft(){
			

			
			$("#selectRight option:selected").each(function(){
				var value = $(this).val();
				var text = $(this).text();
				if($.inArray(value,addRight)>=0){
					//只能移除不是当前部门的用户
					if($.inArray(value,addLeft)<0){
						addLeft[addLeft.length]=value;
					}
					userMap.remove(value);
					$("#selectRight option[value="+value+"]").remove();
					$("#selectLeft").append("<option value='"+value+"'>"+text+"</option>");
				}
				else
				{
					parent.art.dialog.tips("只有调出部门的人员能够移动!",3);
				}
				
				
			});
		}	
		/**全部右移*/
		function removeRights(){
			if($("#deptId2").val()==""){
				parent.art.dialog.tips("请先在右边选择部门!",3);
				return false;
			}

			$("#selectLeft option").each(function(){
				$(this).attr('selected',true);
			});
			removeRight();

			return ;
			addRight = user1;
			addLeft = new Array();
			$("#selectLeft option").each(function(){
				var value = $(this).val();
				var text = $(this).text();
				$("#selectLeft option[value="+value+"]").remove();
				$("#selectRight").append("<option value='"+value+"'>"+text+"</option>");
			});
		}	
		/**全部左移*/
		function removeLefts(){

			$("#selectRight option").each(function(){
				var value = $(this).val();
				var text = $(this).text();
				//判断是不是左边的用户
				if( $.inArray(value,addRight)>=0){
					$(this).attr('selected',true);
				}
				else
				{
					$(this).attr('selected',false);
					parent.art.dialog.tips("仅允许移动调出部门人员！",3);
				}
			});
			removeLeft();
			return ;
			addLeft = user2;
			addRight = new Array();
			$("#selectRight option").each(function(){
				var value = $(this).val();
				var text = $(this).text();
				if($.inArray(value,addRight)>=0){
					$("#selectRight option[value="+value+"]").remove();
					$("#selectLeft").append("<option value='"+value+"'>"+text+"</option>");
				}
			});
		}
		
		/**改变颜色*/
		function changeColor(){
			$.each(user1,function(i,n){
				$("option[value='"+n+"']").css("color","green");
			});
			$.each(user2,function(i,n){
				$("option[value='"+n+"']").css("color","blue");
			});
			$.each(addLeft,function(i,n){
				$("option[value='"+n+"']").css("color","blue");
			});
			$.each(addRight,function(i,n){
				$("option[value='"+n+"']").css("color","green");
			});
		}
		
		
		function changeDept(){
			if(user1==null || user2==null){
				parent.art.dialog.tips("请先选择部门！",3);
				return ;
			}
			var right = addRight.join(",");
			var left = addLeft.join(",")
			$("#addRight").val(right);
			$("#addLeft").val(left);
			if(userMap.isEmpty()){//  right == "" && left ==""){
				parent.art.dialog.tips("未作任何改变！",3);
				return ;
			}
			$("#addRight").val(userMap.keyString());
			$("#addRightName").val(userMap.valueString());
			//return 
			top.mask();
			parent.art.dialog.confirm("是否确定进行人员调整？",function(){
				$("#myform").ajaxSubmit({
					type:"post",
					dataType:"json",
					success:function(data){
			top.unmask();
						parent.art.dialog.tips("操作成功！",3);
						window.setTimeout(function(){
							//window.parent.frames["ifrm_data"].frames["ifrm_deptlist"].location.reload();
							//刷新树节点
							//window.parent.frames["ifrm_data"].refreshTree('${dept.deptId }','add');
							parent.frames["ifrm_data"].win.close();
						},1500);
					},
					error:function(){
			top.unmask();
						parent.art.dialog.tips("操作失败！",3);
					}
				});
			})
		}
	</script>
</head>


<body style="font-family: verdana 黑体;font-size: 12px;">
	<div class="content_wrap content">
		<div id="top">
			<div id="role_title">调出部门</div>
			<div id="user_role_title" style="color: green">调出部门人员</div>
			<div id="user_dept_title" style="color: blue">调入部门人员</div>
			<div id="dept_title">调入部门</div>
		</div>
			<div class="div left tree1">
				<ul id="tree1" class="ztree"></ul>
			</div>
			<select id="selectLeft" class="userLeft" multiple="multiple" size="50">
			</select>
			<div id="opera">
				<p id="moveRight" title="右移">&gt;</p>
				<p id="moveLeft" title="左移">&lt;</p>
				<p id="moveRights" title="全部右移">&gt;&gt;</p>
				<p id="moveLefts" title="全部左移">&lt;&lt;</p>
			</div>
			<select id="selectRight" class="userRight" multiple="multiple" size="50"></select>
			<div class="div tree2">
				<ul id="tree2" class="ztree"></ul>
			</div>
	</div>
			<form id="myform" action="<%=request.getContextPath()%>/user/changedept.json" method="post">
				<input type="hidden" name="addLeft" id="addLeft"/>
				<input type="hidden" name="addRight" id="addRight"/>
				<input type="hidden" name="addRightName" id="addRightName"/>
				<!-- 左侧部门号 -->
				<input type="hidden" id="deptId1" name="deptId1"/>
				<input type="hidden" id="deptId1name" name="deptId1name"/>
				<!-- 右侧部门号 -->
				<input type="hidden" id="deptId2" name="deptId2"/>
				<input type="hidden" id="deptId2name" name="deptId2name"/>
				<!-- 
				<input type="button" onclick="sub_Form()" value="保存"/>
				<input type="button" onclick="deleteDept()" value="删除"/>
				<input type="button" onclick="colse()" value="关闭"/>
				 -->
			</form>
			<input type="hidden" name="deleteDept" id="deleteDept"/>
			<input type="hidden" id="isParent"/>
</body>
</html>